<template>
<div class="left-side-block">
  <div>
    <div v-for="item in pageArray" :key="item.name" >
      <buttonSVG
          @click="butClick(item)"
          :ifhove="buttonActive === item.name"
          :lable="item.lable"></buttonSVG>
    </div>
  </div>
  <div >
    <el-carousel
        ref="carouselDom"
        indicator-position="none"
        height="100%"
        direction="vertical"
        :autoplay="false">
      <el-carousel-item class="jcsj_item" name="jcsj">
        <el-checkbox-group
            :validate-event="false"
            v-model="jcsjCheckList">
          <el-checkbox @change="jcsjChange('ntfb')" class="checkbox-div" label="农田分布" value="ntfb" />
          <el-checkbox class="checkbox-div" label="机埠" value="jb" disabled />
          <el-checkbox class="checkbox-div" label="排水渠" value="psq" disabled />
          <el-checkbox class="checkbox-div" label="机耕道" value="jgd" disabled />
          <el-checkbox class="checkbox-div" label="田埂" value="tg" disabled />
          <el-checkbox class="checkbox-div" label="机埠范围" value="jbfw" disabled />
          <el-checkbox @change="jcsjChange('jsk')" class="checkbox-div" label="进水口" value="jsk" />
        </el-checkbox-group>
      </el-carousel-item>
      <el-carousel-item name="szhsb">
        <el-checkbox-group
            :validate-event="false"
            v-model="jcsjCheckList">
          <el-checkbox @change="jcsjChange('sp')" class="checkbox-div" label="视频监控设备" value="sp" />
          <el-checkbox @change="jcsjChange('tr')" class="checkbox-div" label="土壤监测设备" value="tr" />
          <el-checkbox @change="jcsjChange('bcjc')" class="checkbox-div" label="病虫监测设备" value="bcjc" />
          <el-checkbox class="checkbox-div" label="自动出水设备" value="zdcs" disabled />
        </el-checkbox-group>
      </el-carousel-item>
      <el-carousel-item name="njsb">
        <el-checkbox-group
            :validate-event="false"
            v-model="jcsjCheckList">
          <el-checkbox @change="jcsjChange('tlj')" class="checkbox-div" label="拖拉机监控" value="tlj" />
          <el-checkbox @change="jcsjChange('sgj')" class="checkbox-div" label="收割机监控" value="sgj" />
          <el-checkbox class="checkbox-div" label="插秧机监控" value="cyj" disabled />
          <el-checkbox @change="jcsjChange('wrj')" class="checkbox-div" label="无人机监控" value="wrj" />
          <el-checkbox class="checkbox-div" label="打捆机监控" value="dkj" disabled />
          <el-checkbox class="checkbox-div" label="烘干机监控" value="hgj" disabled />
          <el-checkbox class="checkbox-div" label="冷库监控" value="lkjk" disabled />
          <el-checkbox class="checkbox-div" label="育秧设备监控" value="yysb" disabled />
          <el-checkbox class="checkbox-div" label="粮仓监控" value="lcjk" disabled />
        </el-checkbox-group>
      </el-carousel-item>
      <el-carousel-item name="nzgl">
        <el-descriptions :column="1">
          <el-descriptions-item label="小麦种子:" label-align="right" align="left">
            100斤
          </el-descriptions-item>
          <el-descriptions-item label="小麦肥料:" label-align="right" align="left">
            5斤
          </el-descriptions-item>
          <el-descriptions-item label="小麦除草:" label-align="right" align="left">
            5瓶
          </el-descriptions-item>
          <el-descriptions-item label="小麦防病除虫:" label-align="right" align="left">
            0.5瓶
          </el-descriptions-item>
          <el-descriptions-item label="水稻种子:" label-align="right" align="left">
            20斤
          </el-descriptions-item>
          <el-descriptions-item label="水稻肥料:" label-align="right" align="left">
            500斤
          </el-descriptions-item>
          <el-descriptions-item label="水稻除草:" label-align="right" align="left">
            10瓶
          </el-descriptions-item>
          <el-descriptions-item label="水稻防病除虫:" label-align="right" align="left">
            300瓶
          </el-descriptions-item>
        </el-descriptions>
      </el-carousel-item>
      <el-carousel-item name="nzwjc">
        <el-checkbox-group
            :validate-event="false"
            v-model="jcsjCheckList">
          <el-checkbox @change="jcsjChange('xmzs')" class="checkbox-div" label="小麦长势" value="xmzs" />
          <el-checkbox class="checkbox-div" label="小麦草害" value="xmch" disabled />
          <el-checkbox class="checkbox-div" label="小麦病害" value="xmbh" disabled />
          <el-checkbox class="checkbox-div" label="小麦虫害" value="xmchongh" disabled />
          <el-checkbox class="checkbox-div" label="水稻长势" value="sdzs" disabled />
          <el-checkbox class="checkbox-div" label="水稻草势" value="sdcs" disabled />
          <el-checkbox @change="jcsjChange('sdbh')" class="checkbox-div" label="水稻病害" value="sdbh" />
          <el-checkbox class="checkbox-div" label="水稻虫害" value="sdch" disabled />
        </el-checkbox-group>
      </el-carousel-item>
      <el-carousel-item name="clyg">
        <el-descriptions :column="1">
          <el-descriptions-item label="小麦预估产量:" label-align="right" align="left">
            100斤
          </el-descriptions-item>
          <el-descriptions-item label="小麦实际产量:" label-align="right" align="left">
            100斤
          </el-descriptions-item>
          <el-descriptions-item label="水稻预估产量:" label-align="right" align="left">
            100斤
          </el-descriptions-item>
          <el-descriptions-item label="水稻实际产量:" label-align="right" align="left">
            100斤
          </el-descriptions-item>
        </el-descriptions>
      </el-carousel-item>
      <el-carousel-item name="jcssjj">
        <el-checkbox-group
            :validate-event="false"
            v-model="jcsjCheckList">
          <el-checkbox @change="jcsjChange('cskjc')" class="checkbox-div" label="出水口监测" value="cskjc" />
          <el-checkbox class="checkbox-div" label="排水渠监测" value="psqjc" disabled />
          <el-checkbox class="checkbox-div" label="机耕道监测" value="jgdjc" disabled />
          <el-checkbox class="checkbox-div" label="机埠监测" value="jfjc" disabled />
          <el-checkbox class="checkbox-div" label="田埂监测" value="tgjc" disabled />
        </el-checkbox-group>
      </el-carousel-item>
      <el-carousel-item name="flhjj">
        <h3>非粮化监测</h3>
      </el-carousel-item>
      <el-carousel-item name="lbbx">
        <el-checkbox-group
            :validate-event="false"
            v-model="jcsjCheckList">
          <el-checkbox @change="jcsjChange('lsbt')" class="checkbox-div" label="粮食补贴" value="lsbt" />
          <el-checkbox class="checkbox-div" label="保险理赔" value="bxlp" disabled />
        </el-checkbox-group>
      </el-carousel-item>
    </el-carousel>
  </div>
</div>
</template>

<script>
import ButtonSVG from "@/components/button/buttonSVG.vue";

let Cesium = window.Cesium;

export default {
    name: "LeftSideBlock",
    components: {
      ButtonSVG
    },
    data() {
        return {
          buttonActive: "jcsj",
          jcsjCheckList: [],
          szhsbCheckList: [],
          njsbCheckList: [],
          pageArray: [
            {name: 'jcsj', lable:"基础数据",url:"",ifhove:true,isDisabled:true},
            {name: 'szhsb', lable:"数字化设备",url:"",ifhove:false,isDisabled:true},
            {name: 'njsb', lable:"农机设备",url:"",ifhove:false,isDisabled:true},
            {name: 'nzgl', lable:"农资管理",url:"",ifhove:false,isDisabled:true},
            {name: 'nzwjc', lable:"农作物监测",url:"",ifhove:false,isDisabled:true},
            {name: 'clyg', lable:"产量预估",url:"",ifhove:false,isDisabled:true},
            {name: 'jcssjj', lable:"基础设施检测",url:"",ifhove:false,isDisabled:true},
            {name: 'flhjj', lable:"非粮化监测",url:"",ifhove:false,isDisabled:true},
            {name: 'lbbx', lable:"粮补保险",url:"",ifhove:false,isDisabled:true},
          ],
          key2Config:{
            ntfb:{geojsonUrl:"./data/ntfb.geojson",color:[1.0, 0.5, 0, 0.8],name:""},
            xmzs:{geojsonUrl:"./data/ntfb.geojson",color:[0.4, 0.2, 0.5, 0.8],name:""},
            sdbh:{geojsonUrl:"./data/jsk.geojson",imgUrl:"./icon/img_1.png",name:"水稻病害"},
            cskjc:{geojsonUrl:"./data/jsk.geojson",imgUrl:"./icon/img_1.png",name:"出水口监测"},
            lsbt:{geojsonUrl:"./data/jsk.geojson",imgUrl:"./icon/土壤固废管理.png",name:"粮食补贴"},

            jsk:{geojsonUrl:"./data/jsk.geojson",imgUrl:"./icon/img_1.png",name:"进水口"},
            sp:{geojsonUrl:"./data/sp.geojson",imgUrl:"./icon/土壤监测 (3).png",name:"视频监控设备"},
            tr:{geojsonUrl:"./data/tr.geojson",imgUrl:"./icon/土壤固废管理.png",name:"土壤监测设备"},
            bcjc:{geojsonUrl:"./data/bcjc.geojson",imgUrl:"./icon/病虫害 (1).png",name:"病虫监测设备"},
            tlj:{geojsonUrl:"./data/tlj.geojson",imgUrl:"./icon/拖拉机2 (1).png",name:"拖拉机监控"},
            sgj:{geojsonUrl:"./data/sgj.geojson",imgUrl:"./icon/收割机 (1).png",name:"收割机监控"},
            wrj:{geojsonUrl:"./data/wrj.geojson",imgUrl:"./icon/无人机-copy.png",name:"无人机监控"},
          },
        }
    },
    created() {},
    mounted() {

    },
    watch: {},
  methods:{
    butClick(item){
      let me = this;
      me.buttonActive = item.name;
      this.$refs.carouselDom.setActiveItem(item.name);
    },
    jcsjChange(dataKey){
      console.log(dataKey)
      if(this.jcsjCheckList.indexOf(dataKey) !== -1){
        this.loadSourceGeojsonPoint(this.key2Config[dataKey].geojsonUrl,dataKey);
      }else {
        this.removeEntiy(dataKey)
      }
    },
    removeEntiy(dataKey){
      // 暂停事件处理
      window.Viewer.entities.suspendEvents();
      let entArr = []
      window.Viewer.entities.values.forEach((ent)=>{
        if(ent.name.indexOf(dataKey) > -1){
          entArr.push(ent)
        }
      })
      entArr.map(E=>{
        window.Viewer.entities.remove(E)
      })
      // 恢复事件处理
      window.Viewer.entities.resumeEvents();
    },
    loadSourceGeojsonPoint(url,dataKey){
      // "./data/tlj.json"
      let dataSource = Cesium.GeoJsonDataSource.load(url);
      dataSource.then((data) => {
        let entities = data.entities.values;
        // 暂停事件处理
        window.Viewer.entities.suspendEvents();
        for (let item of entities) {
          let entity;
          if(item._billboard){
            entity= window.Viewer.entities.add({
              name: item._id+","+dataKey,
              position: item.position,
              properties: item.properties,
              billboard: {
                image: this.key2Config[dataKey].imgUrl,
                show: true,
                scale: 0.8,
              },
            });
          }else if(item._polygon){
            entity = window.Viewer.entities.add({
              name: item._id+","+dataKey,
              properties: item.properties,
              polygon: {
                hierarchy: item._polygon.hierarchy.getValue(),
                material: new Cesium.Color (
                  this.key2Config[dataKey].color[0],
                  this.key2Config[dataKey].color[1],
                  this.key2Config[dataKey].color[2],
                  this.key2Config[dataKey].color[3]
                ),
                heightReference: Cesium.HeightReference.CLAMP_TO_GROUND
              },
            });
          }
        }
        // 恢复事件处理
        window.Viewer.entities.resumeEvents();
        window.Viewer.zoomTo( window.Viewer.entities,new Cesium.HeadingPitchRange ( 0 , -1.570797 , 20000 ));
      });
    },
  },
}
</script>

<style lang="scss" scoped>
.left-side-block {
  width: 23%;
  padding: 65px 0 0 13px;
  background:
  linear-gradient(270deg, rgba(9, 26, 57, 0) 0%,
    rgba(9, 26, 57, 0.3) 14%,
    rgba(9, 26, 57, 0.9) 100%);
  position: fixed;
  z-index: 100;
  height: 100vh;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  >:nth-child(1){
    width: 40%;
    margin-right: 4%;
    height: 100%;
    padding: 5% 0;
    z-index: 1;
    > div {
      margin: 8% 0;
      animation-name: driveoff;
      animation-duration: 0.5s;
      animation-fill-mode: both;
    }
    > div:hover {
      animation-name: drive;
      animation-duration: 0.5s;
      animation-fill-mode: both;
    }
  }
  >:nth-child(2){
    padding: 5% 0;
    width: 56%;
    height: 100%;
    .el-carousel{
      height: 90%;
      :deep(.el-carousel__container){
        //background: red;
      }
    }
  }
  @keyframes drive {
    from {
      transform: scale(1, 1);
    }
    to {
      transform: scale(1.2, 1.2);
    }
  }
  @keyframes driveoff {
    from {
      transform: scale(1.2, 1.2);
    }
    to {
      transform: scale(1, 1);
    }
  }
  .el-checkbox-group{
    padding-left: 50px;
    height: 100%;
    display: flex;
    flex-direction: column;
    .el-checkbox{
      color: #ecf5ff;
    }
    .is-disabled{
      color: #606266;
    }
  }
  .checkbox-div {
    margin-top: 20px;
    margin-bottom: 20px;
    transform: scale(1.2);
    :deep(>.el-checkbox__input>.el-checkbox__inner){
      background-color:transparent;
      border-color:#409eff;
    }
    :deep(>.is-checked>.el-checkbox__inner){
      background-color:#409eff;
      border-color:#409eff;
    }
    :deep(>.is-disabled>.el-checkbox__inner){
      background-color:transparent;
      border-color:transparent;
    }
  }
  .el-descriptions{
    height: 55%;
    --el-descriptions-table-border: 1px solid transparentize();
    --el-descriptions-item-bordered-label-background: transparentize;
    :deep(.el-descriptions__body){
      height: 100%;
      background-color:transparent;
      .el-descriptions__table{
        height: 100%;
      }
      .el-descriptions__label,.el-descriptions__content{
        color: #409eff;
        font-size: larger;
        font-weight: 600;
      }
      .el-descriptions__cell{
        margin: 10% 0;
      }
    }
  }
}

</style>

